<template>
    <div class="app-container">
        <!-- 搜索表单 -->
        <el-card v-show="showSearch">
            <el-form ref="formRef" :model="form">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="类型名称">
                            <el-input v-model="form.siteTypeName" placeholder="请输入类型名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="所属应用系统">
                            <el-select v-model="form.systemId" placeholder="请选择">
                                <el-option :label="item.name" :value="item.id" v-for="item in siteTypeAppSelect"
                                    :key="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="状态">
                            <el-select v-model="form.siteTypeStatus" placeholder="请选择">
                                <el-option label="启用" :value="0"></el-option>
                                <el-option label="禁用" :value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" @click="handleSearch">查询</el-button>
                        <el-button @click="handleReset">重置</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <el-card style="margin-top: 20px;">
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" plain icon="Plus" @click="addSiteType"
                        v-hasPermi="['system:user:add']">新增</el-button>
                </el-col>
                <!-- <el-col :span="1.5">
                    <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
                        v-hasPermi="['system:user:edit']">修改</el-button>
                </el-col> -->
                <el-col :span="1.5">
                    <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleBulkDelete"
                        v-hasPermi="['system:user:remove']">删除</el-button>
                </el-col>
                <right-toolbar v-model:showSearch="showSearch" @queryTable="handleSearch"
                    :columns="columns"></right-toolbar>
            </el-row>
            <!-- 表格 -->
            <el-table :data="tableData" @selection-change="handleSelectionChange"
                style="width: 100%; margin-top: 20px;">
                <el-table-column type="selection" align="center" width="55"></el-table-column>
                <el-table-column type="index" label="序号" width="55" align="center" />
                <el-table-column prop="siteTypeName" align="center" label="站点类型名称"></el-table-column>
                <el-table-column prop="systemId" align="center" label="所属应用系统">
                    <template #default="scope">
                        <el-tag>{{siteTypeAppSelect.find((item) => item.id == scope.row.systemId)?.name}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="siteTypeStatus" align="center" label="站点类型状态">
                    <template #default="scope">
                        <el-switch active-value="0" inactive-value="1" @change="activeChange($event, scope.row)"
                            v-model="scope.row.siteTypeStatus"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="250">
                    <template #default="scope">
                        <el-button type="text" icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="text" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div style="margin-top: 20px;">
                <el-pagination v-model:current-page="form.pageNum" v-model:page-size="form.pageSize"
                    :page-sizes="[10, 20, 30, 40]" background layout="total, sizes, prev, pager, next, jumper"
                    :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </el-card>
        <el-dialog v-model="addFormVisible" align-center title="新增站点" width="700" @close="handelColseAddDialog">
            <el-form ref="formRef" :model="addForm" label-width="120px" :rules="addFormRules">
                <!-- 站点类型名称 -->
                <el-form-item label="站点类型名称" prop="siteTypeName">
                    <el-input v-model="addForm.siteTypeName" placeholder="请输入站点类型名称"></el-input>
                </el-form-item>
                <!-- 类型描述 -->
                <el-form-item label="类型描述" prop="typeDescription">
                    <el-input type="textarea" v-model="addForm.typeDescription" placeholder="请输入类型描述"></el-input>
                </el-form-item>
                <!-- 所属应用系统 -->
                <el-form-item label="所属应用系统" prop="systemId">
                    <el-select v-model="addForm.systemId" placeholder="请选择">
                        <el-option :label="item.name" :value="item.id" v-for="item in siteTypeAppSelect"
                            :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 站点类型状态 -->
                <el-form-item label="站点类型状态" prop="siteTypeStatus">
                    <el-switch :active-value="0" :inactive-value="1" v-model="addForm.siteTypeStatus"></el-switch>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="addFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm">
                        确定新增
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="updateFormVisible" align-center title="更新站点" width="700">
            <el-form ref="formRef" :model="updateForm" label-width="120px" :rules="rules">
                <!-- 站点类型ID -->
                <el-form-item label="站点类型ID">
                    <el-input v-model="updateForm.siteTypeId" disabled placeholder="站点类型ID"></el-input>
                </el-form-item>

                <!-- 站点类型名称 -->
                <el-form-item label="站点类型名称" prop="siteTypeName">
                    <el-input v-model="updateForm.siteTypeName" placeholder="请输入站点类型名称"></el-input>
                </el-form-item>

                <!-- 类型描述 -->
                <el-form-item label="类型描述" prop="typeDescription">
                    <el-input type="textarea" v-model="updateForm.typeDescription" placeholder="请输入类型描述"></el-input>
                </el-form-item>

                <!-- 所属应用系统 -->
                <el-form-item label="所属应用系统" prop="systemId">
                    <el-select v-model="updateForm.systemId" placeholder="请选择">
                        <el-option :label="item.name" :value="item.id" v-for="item in siteTypeAppSelect"
                            :key="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <!-- 站点类型状态 -->
                <el-form-item label="站点类型状态" prop="siteTypeStatus">
                    <el-switch active-value="0" inactive-value="1" v-model="updateForm.siteTypeStatus"></el-switch>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="updateFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="updatesSub">
                        确定修改
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { listBasicSiteType, getBasicSiteTypeSelect, getBasicSiteTypeAppSelect, addBasicSiteType, updateBasicSiteType, delBasicSiteType } from '@/api/basic/site/basicSiteType.js';
const showSearch = ref(true);
const handelColseAddDialog = () => {
    addForm.value = {}
}

// Mock data
const tableData = ref([]);
const siteTypeAppSelect = ref([]);
const siteTypeSelect = ref([]);
const multipleSelection = ref('');
const updateFormVisible = ref(false);
const updateForm = ref({
})
const addFormVisible = ref(false);
const total = ref(0);
const addForm = ref({
});
const form = ref({
    siteTypeId: '',
    systemId: '',
    siteTypeStatus: '',
    pageNum: 1,
    pageSize: 10
});
// Form validation rules
const addFormRules = ref({
    siteTypeName: [
        { required: true, message: '请输入站点类型名称', trigger: 'blur' }
    ],
});
const handleSearch = () => {
    listBasicSiteType(form.value).then((response) => {
        tableData.value = response.rows;
        total.value = response.total;
    })
};

const handleReset = () => {
    form.value = {
        siteType: '',
        applicationSystem: '',
        siteStatus: ''
    };
};
const handleSelectionChange = (val) => {
    multipleSelection.value = val.map((item) => item.siteTypeId).join(',');
}

const updatesSub = () => {
    console.log(updateForm.value);

    updateBasicSiteType(updateForm.value).then((response) => {
        handleSearch();
        updateFormVisible.value = false;
    })
}
const addSiteType = () => {
    addFormVisible.value = true;
}
// 新增
const submitForm = () => {
    addBasicSiteType(addForm.value).then((response) => {
        handleSearch();
        addFormVisible.value = false;

    })
}
// 批量删除
const handleBulkDelete = () => {
    if (!multipleSelection.value) {
        return
    };
    ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    }).then(() => {
        delBasicSiteType(multipleSelection.value).then(() => {
            handleSearch();
        })
    })
}
// 状态改变
const activeChange = (value, row) => {

    console.log(row.siteTypeId);

    updateBasicSiteType({
        siteTypeId: row.siteTypeId,
        siteTypeName: row.siteTypeName,
        siteTypeStatus: value
    }).then((response) => {
        handleSearch();
    });
}
const handleSizeChange = (size) => {
    form.value.pageSize = size;
    handleSearch();
};
const handleCurrentChange = (page) => {
    form.value.pageNum = page;
    handleSearch();
};
const handleEdit = (row) => {
    console.log('Edit:', row);
    updateForm.value = { ...row };
    setTimeout(() => {
        updateFormVisible.value = true;
    }, 100);
};

const handleDelete = (row) => {
    ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    }).then(() => {
        delBasicSiteType(row.siteTypeId).then(() => {
            handleSearch();
        })
    })
};


getBasicSiteTypeAppSelect().then((response) => {
    siteTypeAppSelect.value = response.data;
})
getBasicSiteTypeSelect().then((response) => {
    siteTypeSelect.value = response.data;
})
handleSearch();

</script>

<style scoped>
.el-card :deep(.el-form-item) {
    margin-bottom: 0px;
}
</style>